<template>
	<el-container>
		<el-aside width="220px">
			<el-input
				v-model="searchText"
				size="large"
				class="search-input-class"
				placeholder="输入搜索词"
				:suffix-icon="Search"
			/>
			<el-menu
				default-active="1"
				@open="handleOpen"
				@close="handleClose"
			>
				<el-menu-item index="1">
					<span>全部分类</span>
				</el-menu-item>
				<el-menu-item v-for="(item, index) in cateList" :key="index" :index="(index + 2).toString()">
					<span>{{ item.text }}</span>
				</el-menu-item>
			</el-menu>
		</el-aside>
		<el-main>
			<el-row style="margin-bottom: 15px;">
				<el-button :icon="Menu">管理分类</el-button>
				<el-button :icon="Sort">排序</el-button>
				<el-button :icon="Upload">上架</el-button>
				<el-button :icon="Download">下架</el-button>
				<el-button :icon="Refresh">同步</el-button>
				<el-button :icon="Box">改库存</el-button>
				<el-button :icon="EditPen">修改分类</el-button>
				<el-button :icon="UploadFilled">导入商品</el-button>
				<el-button :icon="More">更多</el-button>
				<el-button type="primary" round>创建商品</el-button>
			</el-row>
			<el-menu
				ellipsis
				mode="horizontal"
				default-active="1"
				:popper-offset="16"
			>
				<el-menu-item index="1">全部商品</el-menu-item>
				<el-menu-item index="2">售卖中</el-menu-item>
				<el-menu-item index="3">已下架</el-menu-item>
				<el-menu-item index="4">回收站</el-menu-item>
				<el-menu-item index="5">未合并</el-menu-item>
				<el-menu-item index="6">未同步</el-menu-item>
				<el-menu-item index="7">已售罄</el-menu-item>
				<el-menu-item index="8">待完善</el-menu-item>
			</el-menu>
			<el-table
				:header-row-style="headerStyle"
				:header-cell-style="headerCellStyle"
				:cell-style="cellStyle"
				:data="tableData"
				style="width: 100%"
			>
				<el-table-column align="center" type="selection" width="55"/>
				<el-table-column align="center" label="" width="130">
					<template #default="scope">
						<el-image style="width: 100px; height: 100px;" :src="scope.row.url"
								  fit="contain"/>
					</template>
				</el-table-column>
				<el-table-column label="商品" class-name="table-shop-class" min-width="320">
					<template #default="scope">
						<div class="title">{{ scope.row.name }}</div>
						<div class="tag">{{ scope.row.tag }}</div>
						<div class="shop">{{ scope.row.shop }}</div>
					</template>
				</el-table-column>
				<el-table-column property="gg" label="规格" min-width="200"/>
				<el-table-column label="简单商品" width="120">
					<template #default="scope">
						<span>{{ scope.row.isSimple ? '是' : '否' }}</span>
					</template>
				</el-table-column>
				<el-table-column label="价格" sortable width="120">
					<template #default="scope">
						<span style="color:#ff5a5a;">￥{{ scope.row.price }}</span>
					</template>
				</el-table-column>
				<el-table-column property="hdj" label="活动价" width="120"/>
				<el-table-column property="store" sortable label="库存" width="160"/>
				<el-table-column property="tbdp" label="同步店铺" width="120"/>
				<el-table-column property="cz" label="操作" min-width="180">
					<template #default>
						<el-button link type="primary" size="default">
							编辑
						</el-button>
						<el-button link type="primary" size="default">
							同步
						</el-button>
						<el-button link type="primary" size="default">
							合并
						</el-button>
						<el-button link type="primary" size="default">
							更多
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-main>
	</el-container>

</template>

<script name="Spgl" setup>
import API from "@/api";
import {ref} from "vue";
import {Box, Download, EditPen, Menu, More, Refresh, Search, Sort, Upload, UploadFilled} from '@element-plus/icons-vue'

const cateList = [
	{
		text: '热卖排名♥人气王'
	},
	{
		text: '╭ ♥️ ╮入店有礼'
	},
	{
		text: '炭火烧烤'
	},
	{
		text: '新品花束'
	}
];

const tableData = [
	{
		url: 'https://img.alicdn.com/imgextra/i2/111483146/O1CN0118KQoK1Z6uz3KRMkL_!!111483146-0-eleretail.jpg_160x160.jpg',
		name: '大型99朵玫瑰花束【陪你到世界尽头】生日鲜花店送花上门求婚表白花束送爱人朋友闺蜜生日礼物',
		tag: '热卖排名♥人气王',
		shop: '日落之前花艺工作室-饿了么',
		price: 99,
		store: 1000,
		isSimple: false,
	},
	{
		url: 'https://img.alicdn.com/imgextra/i3/111483146/O1CN015amd5b1Z6uywvvAvN_!!111483146-0-eleretail.jpg_160x160.jpg',
		name: '大型99朵玫瑰花束【陪你到世界尽头】生日鲜花店送花上门求婚表白花束送爱人朋友闺蜜生日礼物,生日鲜花店送花上门求婚表白花束送爱人朋友闺蜜生日礼物',
		tag: '热卖排名♥人气王',
		shop: '日落之前花艺工作室-饿了么',
		price: 99,
		store: 1000,
		isSimple: false,
	},
	{
		url: 'https://img.alicdn.com/imgextra/i1/111483146/O1CN01mUAuio1Z6uyw3pKyo_!!111483146-2-eleretail.png_160x160.jpg',
		name: '大型99朵玫瑰花束【陪你到世界尽头】生日鲜花店送花上门求婚表白花束送爱人朋友闺蜜生日礼物',
		tag: '热卖排名♥人气王',
		shop: '日落之前花艺工作室-饿了么',
		price: 99,
		store: 1000,
		isSimple: false,
	},
	{
		url: 'https://img.alicdn.com/imgextra/i1/111483146/O1CN01zpOu2F1Z6uyyreu6h_!!111483146-0-eleretail.jpg_160x160.jpg',
		name: '大型99朵玫瑰花束【陪你到世界尽头】生日鲜花店送花上门求婚表白花束送爱人朋友闺蜜生日礼物',
		tag: '热卖排名♥人气王',
		shop: '日落之前花艺工作室-饿了么',
		price: 99,
		store: 1000,
		isSimple: false,
	},
]

const shopId = 1236791104;
const searchText = ref('');
const headerStyle = {
	height: '60px'
}
const headerCellStyle = {
	color: '#3D3D3D',
	fontSize: '14px',
	fontWeight: 400,
	backgroundColor: '#F4F4F5'
}
const cellStyle = {
	fontSize: '14px'
}
const handleOpen = (key, keyPath) => {
	console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
	console.log(key, keyPath)
}

const getCate = async () => {
	const res = await API.elmsp.getCategories.get({_shopId: shopId});
	debugger
	console.log(res);
}
getCate();
</script>

<style scoped>
.el-aside {
	border: 1px solid #eee;
}

.el-input--large {
	--el-input-height: 56px;
	font-size: 14px;
}

.table-shop-class .title {
	color: #3D3D3D;
	font-size: 14px;
	font-weight: 400;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	overflow: hidden;
}

.table-shop-class .tag {
	color: #999;
	font-size: 12px;
	font-weight: bold;
}

.table-shop-class .shop {
	color: #999;
	font-size: 12px;
	font-weight: 400;
}

.el-button + .el-button {
	margin-left: 5px;
}

.search-input-class >>> .el-input__wrapper {
	border-radius: 0 !important;
	border-bottom: 1px solid #eee;
	box-shadow: 0 0 0 0;
}

.el-main {
	padding: 0 15px;
}
</style>
